<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">

<h1 class="page-header">过滤器</h1>
<h2>介绍</h2>
<p>avalon从angular中抄来管道符风格的过滤器，但有点不一样。 它只能用于表示数据填空的ms-text, ms-html, {{prop}}, {{prop|html}}。如果不存在参数，
    要求直接跟|filter，如果存在参传，则要用小括号括起，参数要有逗号，这与一般的函数调用差不多，如|truncate(20,"……")</p>
<p>注意,过滤器只能集中放在最后面,不能夹在中间,如下面是错误的</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>{
    {
        aaa ? (aaa | date('yyyy MM dd')) : ""
    }
}</pre></div>
<p>我们看一下自带过滤器是怎么定义的，就明白怎么自定义过滤器了:</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>var filters = avalon.filters = {
    uppercase: function(str) { //用法： {{aaa|uppercase}}
        return str.toUpperCase()
    },
    lowercase: function(str) { //用法： {{aaa|lowercase}}
        return str.toLowerCase()
    },
    truncate: function(str, length, truncation) { //用法： {{aaa|truncate(20, '***')}}
        //length，新字符串长度，truncation，新字符串的结尾的字段,返回新字符串
        length = length || 30
        truncation = truncation === void(0) ? "..." : truncation
        return str.length > length ? str.slice(0, length - truncation.length) + truncation : String(str)
    },
    //……略

}</pre></div>
<p>换言之， 我们只要在avalon.filters这个对象添加多一个函数，第一个参数为|之前的表达式得到的值，不能省略，最后要返回一个字符串就行了。</p>
<p>过滤器中的传参必须是字符串,布尔或数字, 不能是变量或VM中的属性.所有可变动的东西只能出现在|的左边.</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>avalon.filters.haha = function(str) { //用法： {{aaa|haha}}
    return str + "哈哈"
}</pre></div>
<h2 id="camelize">camelize</h2>
<p>驼峰化处理， 如"aaa-bbb"变成"aaaBBB"</p>
<h2 id="currency">currency</h2>
<p>用于格式化货币，类似于number过滤器（即插入千分号），但前面加了一个货币符号，默认使用人民币符号\uFFE5</p>
<ul>
    <li>symbol, 货币符号，默认是\uFFE5</li>
    <li>fractionSize，小数点后保留多少数，默认是2</li>
</ul>
<h2 id="date">date</h2>
<p>对日期进行格式化，date(formats), 目标可能是符合一定格式的字符串，数值，或Date对象。</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;TODO supply a title&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.define({
            $id: 'testtest',
            name: "大跃进右",
            d1: new Date,
            d2: "2011/07/08",
            d3: "2011-07-08",
            d4: "01-01-2000",
            d5: "03 04,2000",
            d6: "3 4,2000",
            d7: 1373021259229,
            d8: "1373021259229",
            d9: "2014-12-07T22:50:58+08:00",
            d10: "\/Date(1373021259229)\/"

        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;div ms-controller="testtest"&gt;
        &lt;p&gt;生成于{{ d1 | date("yyyy MM dd:HH:mm:ss")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d2 | date("yyyy MM dd:HH:mm:ss")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d3 | date("yyyy MM dd:HH:mm:ss")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d4 | date("yyyy MM dd:HH:mm:ss")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d5 | date("yyyy MM dd:HH:mm:ss")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d6 | date("yyyy MM dd")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d7 | date("yyyy MM dd:HH:mm:ss")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d8 | date("yyyy MM dd:HH:mm:ss")}}&lt;/p&gt;
        &lt;p&gt;生成于{{ d9 | date("yyyy MM dd:HH:mm:ss")}} //这是ISO8601的日期格式&lt;/p&gt;
        &lt;p&gt;生成于{{ d10| date("yyyy MM dd:HH:mm:ss")}} //这是ASP.NET输出的JSON数据的日期格式&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>
<p>上面的yyyy, MM, dd其实是一种关键字，用来帮我们格式化日期，详看下表：</p>
<table class="table table-bordered">
    <tr>
        <td>yyyy</td><td>将当前的年份以4位数输出，如果那一年为300，则补足为0300</td>
    </tr>
    <tr>
        <td>yy</td><td>将当前的年份截取最后两位数输出，如2014变成14， 1999变成99， 2001变成01</td>
    </tr>
    <tr>
        <td>y</td><td>将当前的年份原样输出，如2014变成2014， 399变成399， 1变成1</td>
    </tr>
    <tr>
        <td>MMMM</td><td>在中文中，MMMM与MMM是没有区别，都是"1月"，"2月"……英语则为该月份的单词全拼</td>
    </tr>
    <tr>
        <td>MMM</td><td>在中文中，MMMM与MMM是没有区别，都是"1月"，"2月"……英语则为该月份的单词缩写(前三个字母)</td>
    </tr>
    <tr>
        <td>MM</td><td>将月份以01-12的形式输出(即不到两位数，前面补0)</td>
    </tr>
    <tr>
        <td>M</td><td>将月份以1-12的形式输出</td>
    </tr>
    <tr>
        <td>dd</td><td>以日期以01-31的形式输出(即不到两位数，前面补0)</td>
    </tr>
    <tr>
        <td>d</td><td>以日期以1-31的形式输出</td>
    </tr>
    <tr>
        <td>EEEE</td><td>将当前天的星期几以“星期一”，“星期二”，“星期日”的形式输出，英语则Sunday-Saturday</td>
    </tr>
    <tr>
        <td>EEE</td><td>将当前天的星期几以“周一”，“周二”，“周日”的形式输出，英语则Sun-Sat</td>
    </tr>
    <tr>
        <td>HH</td><td>将当前小时数以00-23的形式输出</td>
    </tr>
    <tr>
        <td>H</td><td>将当前小时数以0-23的形式输出</td>
    </tr>
    <tr>
        <td>hh</td><td>将当前小时数以01-12的形式输出</td>
    </tr>
    <tr>
        <td>h</td><td>将当前小时数以0-12的形式输出</td>
    </tr>
    <tr>
        <td>mm</td><td>将当前分钟数以00-59的形式输出</td>
    </tr>
    <tr>
        <td>m</td><td>将当前分钟数以0-59的形式输出</td>
    </tr>
    <tr>
        <td>ss</td><td>将当前秒数以00-59的形式输出</td>
    </tr>
    <tr>
        <td>s</td><td>将当前秒数以0-59的形式输出</td>
    </tr>
    <tr>
        <td>a</td><td>将当前时间是以“上午”，“下午”的形式输出</td>
    </tr>
    <tr>
        <td>Z</td><td>将当前时间的时区以-1200-+1200的形式输出</td>
    </tr>
    <tr>
        <td>fullDate</td><td>相当于y年M月d日EEEE  2014年12月31日星期三</td>
    </tr>
    <tr>
        <td>longDate</td><td>相当于y年M月d日EEEE  2014年12月31日</td>
    </tr>
    <tr>
        <td>medium</td><td>相当于yyyy-M-d H:mm:ss   2014-12-31 19:02:44</td>
    </tr>
    <tr>
        <td>mediumDate</td><td>相当于yyyy-M-d   2014-12-31</td>
    </tr>
    <tr>
        <td>mediumTime</td><td>相当于H:mm:ss   19:02:44</td>
    </tr>
    <tr>
        <td>short</td><td>相当于yy-M-d ah:mm   14-12-31 下午7:02</td>
    </tr>
    <tr>
        <td>shortDate</td><td>相当于yy-M-d   14-12-31</td>
    </tr>
    <tr>
        <td>shortTime</td><td>相当于ah:mm   下午7:02</td>
    </tr>
</table>
<h2 id="escape">escape</h2>
<p>对类似于HTML格式的字符串进行转义，如将<、 >转换为&amp;lt;、 &amp;gt;</p>

<h2 id="html">html</h2>
<p>没有传参，将目标转换一个文楼碎片插入指定位置。目标可能是字符串，元素节点，NodeList, 文档碎片</p>
<ul>
    <li>字符串，经过avalon.parseHTML方法变成文档碎片。</li>
    <li>NodelList，创建一个空文档碎片，然后将NodeList中的元素全部appendChild过去。</li>
    <li>元素节点，创建一个空文档碎片，然后将此元素的所有子节点全部appendChild过去。</li>
    <li>文档碎片，直接返回。</li>
</ul>

<h2 id="lowercase">lowercase</h2>
<p>小写化， 如"AAA"变成"aaa"</p>
<h2 id="number">number</h2>
<p>对需要处理的数字的整数部分插入千分号（每三个数字插入一个逗号），有一个参数fractionSize，用于保留小数点的后几位</p>
<ul>
    <li>fractionSize:小数部分的精度，默认为3。</li>
</ul>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;TODO supply a title&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.define({
            $id: "test",
            aaa: 1234.56789
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;p&gt;输入数字:
            &lt;input ms-duplex="aaa"&gt;
        &lt;/p&gt;
        &lt;p&gt;不处理：{{aaa}}&lt;/p&gt;
        &lt;p&gt;不传参：{{aaa|number}}&lt;/p&gt;
        &lt;p&gt;不保留小数：{{aaa|number(0)}}&lt;/p&gt;
        &lt;p&gt;负数:{{-aaa|number(4)}}&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

<div ms-controller="numberFilter">
    <p>输入数字: <input ms-duplex="aaa"></p>
    <p>不处理：{{aaa}}</p>
    <p>不传参：{{aaa|number}}</p>
    <p>不保留小数：{{aaa|number(0)}}</p>
    <p>负数:{{-aaa|number(4)}}</p>
</div>
<script>
    avalon.define({
        $id: "numberFilter",
        aaa: 1234.56789
    })
</script>

<h2 id="sanitize">sanitize</h2>
<p>对用户输入的字符串进行反XSS处理，去掉onclick, javascript:alert，&lt;script&gt;等危险属性与标签。</p>

<h2 id="truncate">truncate</h2>
<p>对长字符串进行截短，有两个可选参数</p>
<ul>
    <li>number，最后返回的字符串的长度，已经将truncation的长度包含在内，默认为30。</li>
    <li>truncation，告知用户它已经被截短的一个结尾标识，默认为"..."</li>
</ul>
<pre class="brush:html;gutter:false;toolbar:false">
<p>{{xxx|truncate(40,'***')}}</p>
</xmp>

<h2 id="uppercase">uppercase</h2>
<p>大写化， 如"aaaa"变成"AAAA"</p>


</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

